<template>
  <div class="nav">
    <div class="container flex-row al-c pointer j-sb">
      <span
        :class="
          route.url == $route.meta.active
            ? 'active route flex-row al-c j-c'
            : 'route flex-row al-c j-c'
        "
        v-for="(route, index) in routes"
        :key="index"
        @click="toPath(route)"
        >{{ route.name }}</span
      >
    </div>
  </div>
</template>
<script>
import router from "@/router";
export default {
  data() {
    return {
      routes: [
        {
          name: "首页",
          active: true,
          url: "/",
        },
        {
          name: "申报规范",
          active: false,
          url: "/details",
        },
        {
          name: "申报展示",
          active: false,
          url: "/vote",
        },
        {
          name: "大赛报道",
          active: false,
          url: "/report",
        },
        {
          name: "专家委员会",
          active: false,
          url: "/member",
        },
        {
          name: "往届名单公示",
          active: false,
          url: "/roster",
        },
        {
          name: "往期回顾",
          active: false,
          url: "/review",
        },
        {
          name: "城市公益巡讲",
          active: false,
          url: "/tour",
        },
      ],
      activeRoute: "Home",
    };
  },
  created() {
    // this.routes = this.getRoutes();
    // this.activeRoute = this.$route.path;
  },
  // watch: {
  //   $route: {
  //     handler(val, oldVal) {
  //       console.log(val, '???');
  //       this.activeRoute = val.name;
  //     },
  //     deep: true, //true 深度监听
  //     immediate: true,
  //   },
  // },
  methods: {
    getRoutes() {
      let routes = router.options.routes;
      console.log(routes);
      let route = new Array();
      routes.forEach((val) => {
        if (val.meta.pid === 0) {
          route.push(val);
        }
      });
      return route;
    },
    toPath(route) {
      this.$router.push({
        path: route.url,
      });
    },
  },
};
</script>
<style lang="less">
.nav {
  width: 100%;
  height: 56px;
  background: #9d111f;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
  .container {
    height: 56px;
    .route {
      font-size: 18px;
      white-space: nowrap;
      color: #ffffff;
      letter-spacing: 0;
      height: 56px;
      box-sizing: border-box;
      padding: 0 20px;
      &:hover {
        background: #810a0a;
      }
    }
    .active {
      background: #810a0a;
    }
  }
}
</style>
